function Sprite(img_file, ancho, alto, numFrames) {
	this.numFrames = numFrames;
	this.incrementoFrame = 1;
	this.frame = 0;
	this.paso = 0;
	this.posX = 800;
	this.posY = 10;
	this.imagen = new Image();
	this.imagen.src = img_file;
	this.alto = alto;
	this.ancho = ancho;
	var that = this;
	this.incrementoFrame = 1;
	this.imagen.onload = function(){ 
		that.is_ready = true;
	}
	this.imagen.src = img_file;
	
	this.actualizarEstado = function() {
		this.posX = this.posX - 2;
		if (this.posX < -this.ancho)
			this.posX = 800;			
	}
	
	this.drawImage = function(contexto) {
		if(this.is_ready){
			contexto.clearRect(Math.max(0, this.posX-20), this.posY, Math.max(this.ancho, this.posX + 20 + this.ancho), this.alto);
			contexto.drawImage(this.imagen, this.frame * this.ancho, 0, this.ancho, this.alto, this.posX, this.posY, this.ancho, this.alto);
			this.paso = (this.paso + 1)% 3;
			if (this.paso == 0)
				this.frame = this.frame + this.incrementoFrame;
			if (this.frame == this.numFrames - 1)
				this.incrementoFrame = -1;
			if (this.frame < 1) 
				this.incrementoFrame = 1;
		}
	}	
}

function Principal(pcanvas) {
	this.canvas = pcanvas;
	this.contexto = pcanvas.getContext("2d");
	this.ancho = pcanvas.width;
	this.alto = pcanvas.height;
	this.sprite = new Sprite("imagenes/pajaro.png", 88, 60, 3);
		
	this.actualizarJuego = function() {
		this.sprite.actualizarEstado();
		this.drawFrame();
	}
	
	this.drawFrame = function(){
		//this.contexto.clearRect(0,0,this.ancho,this.alto);
		this.sprite.drawImage(this.contexto);
	}
}

window.onload = function() {
	var principal = new Principal(document.getElementById("canvasMov"));
	setInterval(function(){principal.actualizarJuego()}, 33);
}
